<template>
  <div>
    <a-table
      :data-source="list"
      size="middle"
      :columns="columns"
      bordered
      :pagination="false"
      :rowKey="(record, index) => index"
    >
      <template #title>
        <a-space>
          <a-input
            v-model="listQuery['serviceId']"
            @pressEnter="loadData"
            v-if="!this.serviceId"
            placeholder="服务id"
            class="search-input-item"
          />
          <a-input
            v-model="listQuery['taskName']"
            @pressEnter="loadData"
            placeholder="任务名称"
            class="search-input-item"
          />
          <a-input
            v-model="listQuery['taskId']"
            @pressEnter="loadData"
            placeholder="任务id"
            class="search-input-item"
          />
          <a-input
            v-model="listQuery['taskNode']"
            @pressEnter="loadData"
            placeholder="节点id"
            class="search-input-item"
          />

          <a-tooltip :title="TASK_STATE[listQuery['taskState']]">
            <a-select
              show-search
              option-filter-prop="children"
              v-model="listQuery['taskState']"
              allowClear
              placeholder="状态"
              class="search-input-item"
            >
              <a-select-option :key="key" v-for="(item, key) in TASK_STATE">{{ item }}- {{ key }}</a-select-option>
              <a-select-option value="">状态</a-select-option>
            </a-select>
          </a-tooltip>
          <a-button type="primary" @click="loadData" :loading="loading">搜索</a-button>
          <a-statistic-countdown format=" s 秒" title="刷新倒计时" :value="countdownTime" @finish="loadData" />
        </a-space>
      </template>
      <a-tooltip #tooltip slot-scope="text" placement="topLeft" :title="text">
        <span>{{ text }}</span>
      </a-tooltip>

      <a-tooltip #address slot-scope="text, item" placement="topLeft" :title="text">
        <a-icon v-if="item.managerStatus && item.managerStatus.leader" type="cloud-server" />
        {{ text }}
      </a-tooltip>
      <a-popover :title="`状态信息：${TASK_STATE[text]}`" #desiredState slot-scope="text, item" placement="topLeft">
        <template #content>
          <p>
            当前状态：<a-tag>{{ text }}-{{ TASK_STATE[text] }}</a-tag>
          </p>
          <p v-if="item.status && item.status.err">错误信息：{{ item.status.err }}</p>
          <p v-if="item.status && item.status.state">
            状态：<a-tag>{{ item.status.state }}</a-tag>
          </p>

          <p v-if="item.status && item.status.message">
            信息：<a-tag>{{ item.status.message }} </a-tag>
          </p>
          <p v-if="item.status && item.status.timestamp">
            更新时间：<a-tag>{{ parseTime(item.status.timestamp) }} </a-tag>
          </p>
        </template>

        <a-tag :color="`${item.status && item.status.err ? 'orange' : text === 'RUNNING' ? 'green' : ''}`">
          {{ text }}
        </a-tag>
      </a-popover>

      <a-tooltip #os slot-scope="text, item" placement="topLeft" :title="text">
        <span>
          <a-tag
            >{{ text }}-{{
              item.description && item.description.platform && item.description.platform.architecture
            }}</a-tag
          >
        </span>
      </a-tooltip>
      <a-tooltip
        #updatedAt
        slot-scope="text, item"
        placement="topLeft"
        :title="`修改时间：${text} 创建时间：${item.createdAt}`"
      >
        <span>
          {{ parseTime(text) }}
        </span>
      </a-tooltip>

      <template #operation slot-scope="text, record">
        <a-space>
          <template>
            <a-button size="small" type="primary" @click="handleLog(record)">日志</a-button>
          </template>
        </a-space>
      </template>
    </a-table>
    <!-- 编辑节点 -->
    <a-modal destroyOnClose v-model:visible="editVisible" title="编辑节点" @ok="handleEditOk" :maskClosable="false">
      <a-form ref="editForm" :rules="rules" :model="temp" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="角色" prop="role">
          <a-radio-group name="role" v-model="temp.role">
            <a-radio value="WORKER"> 工作节点</a-radio>
            <a-radio value="MANAGER"> 管理节点 </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="状态" prop="availability">
          <a-radio-group name="availability" v-model="temp.availability">
            <a-radio value="ACTIVE"> 活跃</a-radio>
            <a-radio value="PAUSE"> 暂停 </a-radio>
            <a-radio value="DRAIN"> 排空 </a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 查看日志 -->
    <a-modal
      destroyOnClose
      v-model:visible="logVisible"
      title="查看日志"
      width="80vw"
      :footer="null"
      :maskClosable="false"
    >
      <pull-log v-if="logVisible" :id="id" :dataId="temp.id" type="taks" :urlPrefix="urlPrefix" />
    </a-modal>
  </div>
</template>

<script>
import { dockerSwarmNodeUpdate, dockerSwarmServicesTaskList, TASK_STATE } from '@/api/docker-swarm'
import { parseTime } from '@/utils/const'
import PullLog from './pull-log'

export default {
  components: { PullLog },
  props: {
    id: {
      type: String
    },
    serviceId: { type: String },
    taskState: {
      type: String
    },
    visible: {
      type: Boolean,
      default: false
    },
    urlPrefix: {
      type: String
    }
  },
  data() {
    return {
      TASK_STATE,
      loading: false,
      listQuery: {},
      list: [],
      temp: {},
      editVisible: false,
      initSwarmVisible: false,
      autoUpdateTime: null,
      logVisible: false,
      rules: {
        role: [{ required: true, message: '请选择节点角色', trigger: 'blur' }],
        availability: [{ required: true, message: '请选择节点状态', trigger: 'blur' }]
      },
      columns: [
        {
          title: '序号',
          width: '80px',
          ellipsis: true,
          align: 'center',
          customRender: (text, record, index) => `${index + 1}`
        },
        { title: '任务Id', dataIndex: 'id', ellipsis: true, scopedSlots: { customRender: 'tooltip' } },
        { title: '节点Id', dataIndex: 'nodeId', ellipsis: true, scopedSlots: { customRender: 'tooltip' } },
        { title: '服务ID', dataIndex: 'serviceId', ellipsis: true, scopedSlots: { customRender: 'tooltip' } },
        {
          title: '镜像',
          dataIndex: 'spec.containerSpec.image',
          ellipsis: true,
          width: 120,
          scopedSlots: { customRender: 'tooltip' }
        },
        // { title: "副本数", dataIndex: "spec.mode.replicated.replicas", width: 90, ellipsis: true, scopedSlots: { customRender: "tooltip" } },
        // { title: "端点", dataIndex: "spec.endpointSpec.mode", ellipsis: true, width: 100, scopedSlots: { customRender: "tooltip" } },
        // { title: "节点地址", width: 150, dataIndex: "status.address", ellipsis: true, scopedSlots: { customRender: "address" } },
        {
          title: '状态',
          width: 140,
          dataIndex: 'desiredState',
          ellipsis: true,
          scopedSlots: { customRender: 'desiredState' }
        },
        {
          title: '错误信息',
          width: 150,
          dataIndex: 'status.err',
          ellipsis: true,
          scopedSlots: { customRender: 'tooltip' }
        },
        { title: 'slot', width: '80px', dataIndex: 'slot', ellipsis: true, scopedSlots: { customRender: 'tooltip' } },

        // { title: "系统类型", width: 140, align: "center", dataIndex: "description.platform.os", ellipsis: true, scopedSlots: { customRender: "os" } },
        // {
        //   title: "创建时间",
        //   dataIndex: "createdAt",

        //   ellipsis: true,
        //   scopedSlots: { customRender: "tooltip" },
        //   width: 170,
        // },
        {
          title: '修改时间',
          dataIndex: 'updatedAt',
          ellipsis: true,
          scopedSlots: { customRender: 'updatedAt' },
          sorter: (a, b) => new Date(a.updatedAt).getTime() - new Date(b.updatedAt).getTime(),
          sortDirections: ['descend', 'ascend'],
          defaultSortOrder: 'descend',
          width: '180px'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
          align: 'center',
          width: '80px'
        }
      ],
      countdownTime: Date.now()
    }
  },
  computed: {},
  beforeDestroy() {},
  mounted() {
    this.listQuery.taskState = this.taskState
    this.loadData()
  },
  methods: {
    parseTime,
    // 加载数据
    loadData() {
      if (!this.visible) {
        return
      }
      this.loading = true
      if (this.serviceId) {
        this.listQuery.serviceId = this.serviceId
      }
      this.listQuery.id = this.id
      dockerSwarmServicesTaskList(this.urlPrefix, this.listQuery).then((res) => {
        if (res.code === 200) {
          this.list = res.data
        }
        this.loading = false
        this.countdownTime = Date.now() + 5 * 1000
      })
    },
    // 日志
    handleLog(record) {
      this.logVisible = true
      this.temp = record
    },
    handleEdit(record) {
      this.editVisible = true
      this.temp = {
        nodeId: record.id,
        role: record.spec.role,
        availability: record.spec.availability
      }
    },
    handleEditOk() {
      this.$refs['editForm'].validate((valid) => {
        if (!valid) {
          return false
        }
        this.temp.id = this.id
        dockerSwarmNodeUpdate(this.urlPrefix, this.temp).then((res) => {
          if (res.code === 200) {
            // 成功
            $notification.success({
              message: res.msg
            })
            this.editVisible = false
            this.loadData()
          }
        })
      })
    }
  }
}
</script>
<style scoped>
/deep/ .ant-statistic div {
  display: inline-block;
}

/deep/ .ant-statistic-content-value,
/deep/ .ant-statistic-content {
  font-size: 16px;
}
</style>
